<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户行为与鼠标跟随效果</title>
		<style>
			body {
				height: 5000px;
			}
			img {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<img src="feiji.jpg" alt="">
		
		<!-- 我们要给文档对象document绑定事件 -->
		<script>
/* 			document.addEventListener('click',function(e){
				// client的含义是鼠标相对于浏览器的可是窗口的位置
				// console.log(e.clientX);
				// console.log(e.clientY);
				// page的含义就是鼠标相对于文档页面的位置
				// console.log(e.pageX);
				// console.log(e.pageY);
				// screen的含义就是鼠标相对于我们的电脑屏幕的位置
				console.log(e.screenX);
				console.log(e.screenY);
				
			}) */
			var image = document.querySelector('img');
			document.addEventListener('mousemove',function(e){
				var x = e.pageX;
				var y = e.pageY;
				console.log(x,y);
				image.style.left = x - 130 + 'px';
				image.style.top = y- 130 + 'px';
			})
		</script>
		
	</body>
</html>